<script setup>
import { ref, watch } from 'vue'
import SelectMapDialog from './components/SelectMapDialog.vue'
import MapSettingKonva from './components/MapSettingKonva.vue'
import CreatePathDialog from './components/CreatePathDialog.vue'
import { inspectionRoute } from '@/api/inspection/map-setting'
import { ElMessage, ElMessageBox } from 'element-plus'

// 当前tabs类型
const activeType = ref('path')

// 选择地图弹窗
const switchMapDialogVisible = ref(false)
function openSwitchMapDialog() {
  switchMapDialogVisible.value = true
}

// 创建路径弹窗
const createPathDialogVisible = ref(false)
const createPathFormData = ref({})

// 地图数据
const mapId = ref(null)
const mapUrl = ref('')

// 获取地图数据
function getMapData(data) {
  mapId.value = data.id
  mapUrl.value = data.url
}

// 路径数据
const pathData = ref([])
async function getPathData(mid = mapId.value) {
  if (mid) {
    const response = await inspectionRoute.read({ mid })
    pathData.value = response.data.list
  }
}

// 获取子组件件提交数据
function getSubmitData(list, scale) {
  createPathDialogVisible.value = true
  const { raw, route } = handlePathData(list, scale)
  createPathFormData.value = {
    mid: mapId.value,
    raw,
    route
  }
}

// 处理路径数据
function handlePathData(list, scale) {
  const route = []
  list.forEach((element) => {
    route.push({
      x: Number((element.x / scale).toFixed(2)),
      y: Number((element.y / scale).toFixed(2)),
      angle: 0
    })
  })
  for (let i = 0; i < route.length - 1; i++) {
    let x = route[i + 1].x - route[i].x
    let y = route[i + 1].y - route[i].y
    if (route[i].x > route[i + 1].x && route[i].y > route[i + 1].y) {
      route[i].angle = -(Math.atan2(y, x) + Math.PI / 2)
    }
    if (route[i].x < route[i + 1].x && route[i].y < route[i + 1].y) {
      route[i].angle = Math.abs(Math.atan2(y, x) - Math.PI / 2)
    }
    if (route[i].x > route[i + 1].x && route[i].y < route[i + 1].y) {
      route[i].angle = -(Math.atan2(y, x) - Math.PI / 2)
    }
    if (route[i].x < route[i + 1].x && route[i].y > route[i + 1].y) {
      route[i].angle = Math.PI - (Math.atan2(y, x) + Math.PI / 2)
    }
    route[i].angle = Number(route[i].angle.toFixed(2))
  }
  let str = ''
  route.forEach((i) => {
    str += `${i.x},${i.y},${i.angle};`
  })
  return {
    raw: JSON.stringify(route),
    route: str.slice(0, str.length - 1)
  }
}

// 删除路径
async function deletePath(id) {
  await ElMessageBox.confirm('确认继续操作吗', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  const { message } = await inspectionRoute.delete(id)
  ElMessage({ type: 'success', message })
  getPathData(mapId.value)
}

// 预览路径
const konva = ref()
function previewPath(raw) {
  konva.value.previewPath(JSON.parse(raw))
}

watch(mapId, () => {
  getPathData(mapId.value)
})

// 创建路径按钮
function createPathButton() {
  ElMessage({
    type: 'warning',
    message: '在地图中右键点击创建路径',
    duration: 5000
  })
}
</script>
<template>
  <el-container class="h-full">
    <el-aside class="mr-4 rounded">
      <div class="h-full bg-[#162331] flex flex-col">
        <el-button class="m-4 mb-0" type="primary" size="large" @click="openSwitchMapDialog">
          选择地图
        </el-button>
        <SelectMapDialog
          v-model:visible="switchMapDialogVisible"
          @handle-confirm="getMapData"
        ></SelectMapDialog>
        <el-tabs v-model="activeType" class="grow" type="border-card">
          <el-tab-pane label="路径" name="path">
            <el-button v-show="mapId" class="ml-4 mt-4" type="primary" @click="createPathButton">
              创建路径
            </el-button>
            <div
              v-for="item in pathData"
              :key="item.id"
              class="h-16 my-2 px-4 select-none cursor-pointer flex justify-between items-center hover:bg-[#2e3946] text-white"
            >
              <div class="flex items-center text-base">
                <span class="ml-3"> {{ item.name }} </span>
              </div>
              <div class="flex items-center text-sm">
                <span class="text-[#999999]" @click="previewPath(item.raw)"> 预览 </span>
                <span class="text-[#999999] ml-4" @click="deletePath(item.id)"> 删除 </span>
              </div>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="充电点" name="charge"> </el-tab-pane> -->
        </el-tabs>
      </div>
      <CreatePathDialog
        v-model:visible="createPathDialogVisible"
        :form-data="createPathFormData"
        @get-path-data="getPathData"
      ></CreatePathDialog>
    </el-aside>
    <el-main class="p-0 rounded bg-[#162331]">
      <MapSettingKonva ref="konva" :map-url="mapUrl" @submit-data="getSubmitData"></MapSettingKonva>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__nav-scroll) {
  background: #162331;
  border: 0;
}

:deep(.el-tabs--border-card) {
  background: #162331;
  border: 0;
}

:deep(.el-tabs__nav-wrap .is-top) {
  height: 56px;
  display: flex;
  align-items: center;
}

:deep(.el-tabs--border-card) {
  .el-tabs__header .el-tabs__item {
    border: 0;
    user-select: none;
  }
}

:deep(.el-tabs__content) {
  padding: 0;
}

:deep(.el-tabs--border-card) {
  .el-tabs__header {
    background: none;
  }
}

:deep(.el-tabs--border-card) {
  .el-tabs__header .el-tabs__item.is-active {
    border: 0;
    border-bottom: 4px solid #24a0ff;
    background: #162331;
  }
}

:deep(.el-tabs__item) {
  padding: 0 !important;
  margin: 0 20px !important;
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 900;
}
</style>
